@import '../../styles/theme.less';

.aiChat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  pointer-events: auto;

  .toggleButton {
    width: 48px;
    height: 48px;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;

    &:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    .anticon {
      font-size: 24px;
    }
  }

  .chatWindow {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: 360px;
    height: 560px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    :global(.ant-card-body) {
      height: calc(100% - 57px);
      padding: 0;
      display: flex;
      flex-direction: column;
    }
  }

  .chatHeader {
    display: flex;
    align-items: center;
    gap: 8px;

    .closeButton {
      margin-left: auto;
      cursor: pointer;
      
      &:hover {
        color: @primary-color;
      }
    }
  }

  .messageList {
    flex: 1;
    overflow-y: auto;
    padding: 16px;

    :global(.ant-list-item) {
      border-bottom: none;
      padding: 8px 0;
    }
  }

  .userMessage,
  .botMessage {
    :global(.ant-list-item-meta-content) {
      max-width: 80%;
    }
  }

  .userMessage {
    flex-direction: row-reverse;

    .messageContent {
      background: @primary-color;
      color: #fff;
      border-radius: 8px 2px 8px 8px;
    }

    .userAvatar {
      background: @primary-color;
    }
  }

  .botMessage {
    .messageContent {
      background: #f0f2f5;
      border-radius: 2px 8px 8px 8px;
    }

    .botAvatar {
      background: #1890ff;
    }
  }

  .messageContent {
    padding: 8px 12px;
    word-break: break-word;
  }

  .messageTime {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 4px;
    text-align: right;
  }

  .inputArea {
    padding: 16px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 8px;

    :global(.ant-input) {
      border-radius: 4px;
    }

    button {
      white-space: nowrap;
    }
  }

  .messageWrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  .userMessage {
    .messageWrapper {
      flex-direction: row-reverse;
    }
  }

  .messageContent {
    max-width: 80%;
    
    .text {
      padding: 8px 12px;
      word-break: break-word;
      background: @primary-color;
      color: #fff;
      border-radius: 8px 2px 8px 8px;
    }

    .time {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.45);
      margin-top: 4px;
      text-align: right;
    }
  }

  .botMessage {
    .messageContent {
      .text {
        background: #f0f2f5;
        color: @text-color;
        border-radius: 2px 8px 8px 8px;
      }
    }
  }
}

:global {
  #root {
    position: relative;
  }
}